<template>
    <div class="xwdtListBox" :style="{ background: bgColor }">
        <div class="titleFlexBox">
            <span class="xwdtTopTitle">{{ title }}</span>
            <span class="ckgdBox" @click="$emit('more-click', title)" >查看更多>></span>
        </div>
        <slot name="top"></slot>
        <div class="xwdtTopList" v-for="item in xwdtList" :key="item" @click="$emit('item-click', item.id)" >
            <div class="huidian"></div>
            <div class="xwdtTopList_text">{{ item.title }}</div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    bgColor: {
        type: String,
        default: '#F7F7F7'  // 保留默认灰色
    },
    title: {
        type: String,
        default: '默认标题'  // 保留默认标题
    },
    xwdtList: {
        type: Array,
        default: []
    }
});

</script>

<style scoped lang="scss">
.xwdtListBox {
    width: 100%;
    // height: 100%;
    background: #F7F7F7;
    padding: 15px;
}

.titleFlexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .xwdtTopTitle {
        font-size: 28px;
        color: #1F1F1F;
    }
    .ckgdBox {
        font-size: 12px;
        color: #979797;
        cursor: pointer;
        &:hover {
            color: $green-color;
        }
    }
}


.xwdtTopList {
    display: flex;
    align-items: center;
    padding: 8px 0;

    .xwdtTopList_text {
        font-size: 14px;
        color: #1F1F1F;
        white-space: nowrap; // 禁止换行
        overflow: hidden; // 隐藏溢出内容
        text-overflow: ellipsis; // 显示省略号
        cursor: pointer;
        transition: color 0.3s ease; // 添加过渡效果

        &:hover {
            color: $green-color;
        }
    }
}

.huidian {
    width: 8px;
    height: 8px;
    background: #8C8C8C;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}
</style>